Zvládnutí hloubky ve WebXR: Podrobný pohled na rozlišení hloubkového bufferu a kontrolu kvality

Rozšířená realita (AR) překročila práh ze světa science fiction a stala se hmatatelným a výkonným nástrojem, který mění naši interakci s digitálními informacemi. Kouzlo AR spočívá v její schopnosti plynule propojovat virtuální svět s tím skutečným. Virtuální postava procházející kolem nábytku ve vašem obývacím pokoji, digitální měřicí nástroj přesně měřící reálný objekt nebo virtuální umělecké dílo správně skryté za skutečným sloupem – všechny tyto zážitky závisí na jedné klíčové technologii: porozumění prostředí v reálném čase. Srdcem tohoto porozumění pro webovou AR je WebXR Depth API.

Depth API poskytuje vývojářům odhad geometrie reálného světa v každém snímku, jak ji vidí kamera zařízení. Tato data, běžně známá jako hloubková mapa, jsou klíčem k odemknutí pokročilých funkcí, jako je okluze, realistická fyzika a tvorba sítě prostředí (environmental meshing). Přístup k těmto hloubkovým datům je však jen prvním krokem. Surové informace o hloubce jsou často zašuměné, nekonzistentní a mají nižší rozlišení než hlavní kanál kamery. Bez správného zpracování mohou vést k blikajícím okluzím, nestabilní fyzice a celkovému narušení iluze ponoření do virtuálního světa.

Tento komplexní průvodce je určen pro vývojáře WebXR, kteří se chtějí posunout za základy AR a vstoupit do sféry skutečně robustních a uvěřitelných zážitků. Rozebereme koncept rozlišení hloubkového bufferu, prozkoumáme faktory, které zhoršují jeho kvalitu, a poskytneme sadu praktických technik pro kontrolu kvality, filtrování a validaci. Zvládnutím těchto konceptů můžete přeměnit zašuměná, surová data na stabilní a spolehlivý základ pro AR aplikace nové generace.

Kapitola 1: Základy WebXR Depth API

Než budeme moci kontrolovat kvalitu hloubkové mapy, musíme nejprve pochopit, co to je a jak k ní přistupujeme. WebXR Depth Sensing API je modul v rámci WebXR Device API, který zpřístupňuje informace o hloubce zachycené senzory zařízení.

Co je hloubková mapa?

Představte si, že fotíte, ale místo ukládání informací o barvě pro každý pixel ukládáte vzdálenost od kamery k objektu, který daný pixel reprezentuje. To je v podstatě hloubková mapa. Je to 2D obraz, typicky ve stupních šedi, kde intenzita pixelu odpovídá vzdálenosti. Světlejší pixely mohou představovat objekty, které jsou blíže, zatímco tmavší pixely představují objekty vzdálenější (nebo naopak, v závislosti na vizualizaci).

Tato data jsou poskytována vašemu WebGL kontextu jako textura, `XRDepthInformation.texture`. To vám umožňuje provádět vysoce efektivní výpočty hloubky pro každý pixel přímo na GPU ve vašich shaderech – což je klíčové pro výkon AR v reálném čase.

Jak WebXR poskytuje informace o hloubce

Abyste mohli API používat, musíte nejprve při inicializaci vaší WebXR session požádat o funkci `depth-sensing`:

const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['depth-sensing'] });

Můžete také specifikovat preference pro formát dat a jejich použití, které prozkoumáme později v sekci o výkonu. Jakmile je session aktivní, ve vaší smyčce `requestAnimationFrame` získáte nejnovější informace o hloubce z WebGL vrstvy:

const depthInfo = xrWebView.getDepthInformation(xrFrame.getViewerPose(xrReferenceSpace));

Pokud je `depthInfo` dostupné, obsahuje několik klíčových informací:

• texture: `WebGLTexture` obsahující surové hodnoty hloubky.
• normDepthFromViewMatrix: Matice pro transformaci souřadnic z prostoru pohledu (view-space) na normalizované souřadnice hloubkové textury.
• rawValueToMeters: Měřítko pro převod surových, bezjednotkových hodnot z textury na metry. To je nezbytné pro přesná měření v reálném světě.

Základní technologie, která tato data generuje, se liší podle zařízení. Některá používají aktivní senzory jako Time-of-Flight (ToF) nebo strukturované světlo, které promítají infračervené světlo a měří jeho návrat. Jiná používají pasivní metody, jako jsou stereoskopické kamery, které hledají korespondenci mezi dvěma obrazy pro výpočet hloubky. Jako vývojář nemáte kontrolu nad hardwarem, ale pochopení jeho omezení je klíčové pro správu dat, která produkuje.

Kapitola 2: Dvě tváře rozlišení hloubkového bufferu

Když vývojáři slyší slovo „rozlišení“, často si představí šířku a výšku obrázku. U hloubkových map je to jen polovina příběhu. Rozlišení hloubky je dvoudílný koncept a obě části jsou pro kvalitu klíčové.

Prostorové rozlišení: „Co“ a „Kde“

Prostorové rozlišení se vztahuje k rozměrům hloubkové textury, například 320x240 nebo 640x480 pixelů. To je často výrazně nižší než rozlišení barevné kamery zařízení (které může být 1920x1080 nebo vyšší). Tento rozpor je hlavním zdrojem artefaktů v AR.

• Vliv na detail: Nízké prostorové rozlišení znamená, že každý hloubkový pixel pokrývá větší oblast reálného světa. To znemožňuje zachytit jemné detaily. Hrany stolu se mohou jevit kostkovaně, tenký sloup lampy může úplně zmizet a rozlišení mezi objekty blízko sebe se stírá.
• Vliv na okluzi: Zde je problém nejvíce viditelný. Když je virtuální objekt částečně za reálným objektem, nízké rozlišení vytváří zjevné „schodovité“ artefakty podél hranice okluze, které narušují pocit ponoření.

Představte si to jako fotografii s nízkým rozlišením. Můžete rozeznat obecné tvary, ale všechny jemné detaily a ostré hrany jsou ztraceny. Výzvou pro vývojáře je často inteligentně „převzorkovat“ (upsample) nebo pracovat s těmito daty nízkého rozlišení, aby vytvořili výsledek s vysokým rozlišením.

Bitová hloubka (přesnost): „Jak daleko“

Bitová hloubka neboli přesnost určuje, kolik různých kroků vzdálenosti lze reprezentovat. Je to číselná přesnost hodnoty každého pixelu v hloubkové mapě. WebXR API může poskytovat data v různých formátech, jako jsou 16bitová celá čísla bez znaménka (`ushort`) nebo 32bitová čísla s plovoucí desetinnou čárkou (`float`).

• 8bitová hloubka (256 úrovní): 8bitový formát může reprezentovat pouze 256 diskrétních vzdáleností. V rozsahu 5 metrů to znamená, že každý krok je téměř 2 centimetry od sebe. Objekty ve vzdálenosti 1,00 m a 1,01 m mohou dostat stejnou hodnotu hloubky, což vede k jevu známému jako „kvantizace hloubky“ nebo pruhování (banding).
• 16bitová hloubka (65 536 úrovní): To je významné zlepšení a běžný formát. Poskytuje mnohem plynulejší a přesnější reprezentaci vzdálenosti, snižuje kvantizační artefakty a umožňuje zachytit jemnější variace hloubky.
• 32bitový float: Tento formát nabízí nejvyšší přesnost a je ideální pro vědecké nebo měřicí aplikace. Vyhýbá se problému pevných kroků celočíselných formátů, ale za cenu vyššího výkonu a paměťových nároků.

Nízká bitová hloubka může způsobit „Z-fighting“, kdy dva povrchy v mírně odlišných hloubkách soutěží o to, který bude vykreslen vpředu, což způsobuje blikání. Také způsobuje, že hladké povrchy vypadají stupňovitě nebo pruhovaně, což je zvláště patrné ve fyzikálních simulacích, kde se může zdát, že virtuální míč se kutálí po sérii schodů místo po hladké rampě.

Kapitola 3: Skutečný svět vs. ideální hloubková mapa: Faktory ovlivňující kvalitu

V dokonalém světě by byla každá hloubková mapa křišťálově čistá, s vysokým rozlišením a dokonale přesnou reprezentací reality. V praxi jsou hloubková data chaotická a náchylná k široké škále problémů způsobených prostředím a hardwarem.

Závislosti na hardwaru

Kvalita vašich surových dat je zásadně omezena hardwarem zařízení. I když nemůžete změnit senzory, znalost jejich typických slabin je klíčová pro vytváření robustních aplikací.

• Typ senzoru: Senzory Time-of-Flight (ToF), běžné v mnoha špičkových mobilních zařízeních, jsou obecně dobré, ale mohou být ovlivněny okolním infračerveným světlem (např. jasným slunečním světlem). Stereoskopické systémy mohou mít problémy s povrchy bez textury, jako je obyčejná bílá zeď, protože mezi oběma pohledy kamery nejsou žádné výrazné rysy, které by bylo možné spárovat.
• Energetický profil zařízení: Pro úsporu baterie může zařízení záměrně poskytovat hloubkovou mapu s nižším rozlišením nebo větším šumem. Některá zařízení mohou dokonce střídat různé režimy snímání, což způsobuje znatelné změny v kvalitě.

Sabotéři z prostředí

Prostředí, ve kterém se váš uživatel nachází, má obrovský dopad na kvalitu hloubkových dat. Vaše AR aplikace musí být odolná vůči těmto běžným výzvám.

• Problematické vlastnosti povrchů:
  • Odrazivé povrchy: Zrcadla a leštěný kov se chovají jako portály a ukazují hloubku odražené scény, nikoli samotného povrchu. To může ve vaší hloubkové mapě vytvořit bizarní a nesprávnou geometrii.
  • Průhledné povrchy: Sklo a čirý plast jsou pro hloubkové senzory často neviditelné, což vede k velkým dírám nebo nesprávným údajům o hloubce toho, co je za nimi.
  • Tmavé nebo světlo pohlcující povrchy: Velmi tmavé matné povrchy (jako černý samet) mohou absorbovat infračervené světlo z aktivních senzorů, což má za následek chybějící data (díry).
• Světelné podmínky: Silné sluneční světlo může přehltit ToF senzory a vytvořit značný šum. Naopak velmi špatné světelné podmínky mohou být náročné pro pasivní stereo systémy, které se spoléhají na viditelné rysy.
• Vzdálenost a dosah: Každý hloubkový senzor má optimální pracovní dosah. Objekty, které jsou příliš blízko, mohou být mimo ohnisko, zatímco přesnost se výrazně snižuje u vzdálených objektů. Většina spotřebitelských senzorů je spolehlivá pouze do vzdálenosti přibližně 5–8 metrů.
• Pohybové rozostření: Rychlý pohyb zařízení nebo objektů ve scéně může způsobit pohybové rozostření v hloubkové mapě, což vede k rozmazaným hranám a nepřesným údajům.

Kapitola 4: Nástroje vývojáře: Praktické techniky pro kontrolu kvality

Nyní, když rozumíme problémům, zaměřme se na řešení. Cílem není dosáhnout dokonalé hloubkové mapy – to je často nemožné. Cílem je zpracovat surová, zašuměná data na něco, co je konzistentní, stabilní a dostatečně dobré pro potřeby vaší aplikace. Všechny následující techniky by měly být implementovány ve vašich WebGL shaderech pro výkon v reálném čase.

Technika 1: Temporální filtrování (vyhlazování v čase)

Hloubková data mohou být snímek od snímku velmi „roztřesená“, kdy jednotlivé pixely rychle mění své hodnoty. Temporální filtrování toto vyhlazuje smícháním dat hloubky aktuálního snímku s daty z předchozích snímků.

Jednoduchou a efektivní metodou je Exponenciální klouzavý průměr (EMA). Ve vašem shaderu byste si udržovali „historickou“ texturu, která ukládá vyhlazenou hloubku z předchozího snímku.

Koncepční logika shaderu:

float smoothing_factor = 0.6; // Hodnota mezi 0 a 1. Vyšší = více vyhlazování. vec2 tex_coord = ...; // Souřadnice textury aktuálního pixelu float current_depth = texture2D(new_depth_map, tex_coord).r; float previous_depth = texture2D(history_depth_map, tex_coord).r; // Aktualizovat pouze pokud je aktuální hloubka platná (ne 0) if (current_depth > 0.0) { float smoothed_depth = mix(current_depth, previous_depth, smoothing_factor); // Zapsat vyhlazenou hloubku do nové textury historie pro další snímek } else { // Pokud jsou aktuální data neplatná, pouze přenést stará data // Zapsat předchozí hloubku do nové textury historie }

Výhody: Vynikající pro redukci vysokofrekvenčního šumu a blikání. Díky tomu působí okluze a fyzikální interakce mnohem stabilněji.

Nevýhody: Zavádí mírné zpoždění nebo efekt „duchů“, zejména u rychle se pohybujících objektů. `smoothing_factor` musí být vyladěn tak, aby vyvážil stabilitu s reaktivitou.

Technika 2: Prostorové filtrování (vyhlazování se sousedy)

Prostorové filtrování zahrnuje úpravu hodnoty pixelu na základě hodnot jeho sousedních pixelů. To je skvělé pro opravu izolovaných chybných pixelů a vyhlazení malých nerovností.

• Gaussovské rozostření: Jednoduché rozostření může snížit šum, ale také změkčí důležité ostré hrany, což vede k zaobleným rohům na stolech a rozmazaným hranicím okluze. Pro tento účel je obecně příliš agresivní.
• Bilateralní filtr: Toto je vyhlazovací filtr, který zachovává hrany. Funguje tak, že průměruje sousední pixely, ale dává větší váhu sousedům, kteří mají podobnou hodnotu hloubky jako středový pixel. To znamená, že vyhladí rovnou zeď, ale nebude průměrovat pixely přes hloubkovou nespojitost (jako je hrana stolu). Je to mnohem vhodnější pro hloubkové mapy, ale výpočetně náročnější než jednoduché rozostření.

Technika 3: Vyplňování děr a inpainting

Často bude vaše hloubková mapa obsahovat „díry“ (pixely s hodnotou 0), kde senzor nedokázal získat údaj. Tyto díry mohou způsobit, že se virtuální objekty nečekaně objeví nebo zmizí. Jednoduché techniky vyplňování děr to mohou zmírnit.

Koncepční logika shaderu:

vec2 tex_coord = ...; float center_depth = texture2D(depth_map, tex_coord).r; if (center_depth == 0.0) { // Pokud je to díra, vzorkovat sousedy a zprůměrovat platné float total_depth = 0.0; float valid_samples = 0.0; // ... smyčka přes mřížku sousedů 3x3 nebo 5x5 ... // if (neighbor_depth > 0.0) { total_depth += neighbor_depth; valid_samples++; } if (valid_samples > 0.0) { center_depth = total_depth / valid_samples; } } // Použít (potenciálně vyplněnou) hodnotu center_depth

Pokročilejší techniky zahrnují šíření hloubkových hodnot z okrajů díry dovnitř, ale i jednoduchý průměr sousedů může výrazně zlepšit stabilitu.

Technika 4: Zvyšování rozlišení (Upsampling)

Jak bylo zmíněno, hloubková mapa má obvykle mnohem nižší rozlišení než barevný obraz. Pro provedení přesné okluze pro každý pixel potřebujeme vygenerovat hloubkovou mapu s vysokým rozlišením.

• Bilineární interpolace: Toto je nejjednodušší metoda. Při vzorkování hloubkové textury s nízkým rozlišením ve vašem shaderu může hardwarový sampler GPU automaticky smíchat čtyři nejbližší hloubkové pixely. Je to rychlé, ale výsledkem jsou velmi rozmazané hrany.
• Upsampling s ohledem na hrany (Edge-Aware Upsampling): Pokročilejší přístup používá barevný obraz s vysokým rozlišením jako vodítko. Logika spočívá v tom, že pokud je v barevném obraze ostrá hrana (např. hrana tmavé židle proti světlé zdi), měla by být pravděpodobně ostrá hrana i v hloubkové mapě. Tím se zabrání rozmazání přes hranice objektů. Ačkoli je implementace od nuly složitá, základní myšlenkou je použití technik jako Joint Bilateral Upsampler, který upravuje váhy filtru na základě prostorové vzdálenosti i barevné podobnosti ve vysokorozlišovací textuře kamery.

Technika 5: Ladění a vizualizace

Nemůžete opravit, co nevidíte. Jedním z nejmocnějších nástrojů ve vaší sadě pro kontrolu kvality je schopnost přímo vizualizovat hloubkovou mapu. Můžete vykreslit hloubkovou texturu na čtyřúhelník na obrazovce. Protože surové hodnoty hloubky nejsou ve viditelném rozsahu, budete je muset ve svém fragment shaderu normalizovat.

Koncepční logika normalizačního shaderu:

float raw_depth = texture2D(depth_map, tex_coord).r; float depth_in_meters = raw_depth * rawValueToMeters; // Normalizovat do rozsahu 0-1 pro vizualizaci, např. pro max. dosah 5 metrů float max_viz_range = 5.0; float normalized_color = clamp(depth_in_meters / max_viz_range, 0.0, 1.0); gl_FragColor = vec4(normalized_color, normalized_color, normalized_color, 1.0);

Prohlížením surových, filtrovaných a převzorkovaných hloubkových map vedle sebe můžete intuitivně ladit své parametry filtrování a okamžitě vidět dopad vašich algoritmů pro kontrolu kvality.

Kapitola 5: Případová studie - Implementace robustní okluze

Spojme tyto koncepty dohromady s nejčastějším případem použití Depth API: okluzí. Cílem je, aby se virtuální objekt správně zobrazoval za reálnými objekty.

Základní logika (ve fragment shaderu)

Proces probíhá pro každý jednotlivý pixel vašeho virtuálního objektu:

1. Získání hloubky virtuálního fragmentu: Ve vertex shaderu vypočítáte pozici vrcholu v prostoru ořezu (clip-space). Z-složka této pozice po perspektivním dělení představuje hloubku vašeho virtuálního objektu. Tuto hodnotu předejte fragment shaderu.
2. Získání hloubky reálného světa: Ve fragment shaderu musíte zjistit, který pixel v hloubkové mapě odpovídá aktuálnímu virtuálnímu fragmentu. Můžete použít `normDepthFromViewMatrix` poskytovanou API k transformaci pozice vašeho fragmentu z prostoru pohledu na souřadnice textury hloubkové mapy.
3. Vzorkování a zpracování reálné hloubky: Použijte tyto souřadnice textury k vzorkování vaší (ideálně předfiltrované a převzorkované) hloubkové mapy. Nezapomeňte převést surovou hodnotu na metry pomocí `rawValueToMeters`.
4. Porovnání a zahození: Porovnejte hloubku vašeho virtuálního fragmentu s hloubkou reálného světa. Pokud je virtuální objekt dál (má větší hodnotu hloubky) než reálný objekt na daném pixelu, je zakrytý (okludovaný). V GLSL použijete klíčové slovo `discard` k zastavení vykreslování tohoto pixelu.

Bez kontroly kvality: Hrany okluze budou kostkované (kvůli nízkému prostorovému rozlišení) a budou se třást nebo šumět (kvůli temporálnímu šumu). Bude to vypadat, jako by na váš virtuální objekt byla hrubě aplikována zašuměná maska.

S kontrolou kvality: Použitím technik z kapitoly 4 – spuštěním temporálního filtru pro stabilizaci dat a použitím metody upsamplingu s ohledem na hrany – se hranice okluze stane hladkou a stabilní. Virtuální objekt bude vypadat, jako by byl pevnou a uvěřitelnou součástí reálné scény.

Kapitola 6: Výkon, výkon, výkon

Zpracování hloubkových dat v každém snímku může být výpočetně náročné. Špatná implementace může snadno snížit snímkovou frekvenci vaší aplikace pod pohodlnou hranici pro AR, což vede k nevolnosti. Zde jsou některá nezbytná doporučení.

Zůstaňte na GPU

Nikdy nečtěte data hloubkové textury zpět na CPU v rámci vaší hlavní renderovací smyčky (např. pomocí `readPixels`). Tato operace je neuvěřitelně pomalá a zastaví renderovací pipeline, čímž zničí vaši snímkovou frekvenci. Veškerá logika filtrování, upsamplingu a porovnávání musí být provedena v shaderech na GPU.

Optimalizujte své shadery

• Používejte vhodnou přesnost: Používejte `mediump` místo `highp` pro floaty a vektory, kde je to možné. To může poskytnout významné zvýšení výkonu na mobilních GPU.
• Minimalizujte čtení textur: Každé vzorkování textury má svou cenu. Při implementaci filtrů se snažte vzorky znovu použít, kde je to možné. Například 3x3 box blur lze rozdělit na dva průchody (jeden horizontální, jeden vertikální), které vyžadují celkově méně čtení textur.
• Větvení je drahé: Složité příkazy `if/else` v shaderu mohou způsobovat problémy s výkonem. Někdy je rychlejší vypočítat oba výsledky a použít matematickou funkci jako `mix()` nebo `step()` k výběru výsledku.

Používejte vyjednávání funkcí WebXR moudře

Když požadujete funkci `depth-sensing`, můžete poskytnout deskriptor s preferencemi:

{ requiredFeatures: ['depth-sensing'], depthSensing: { usagePreference: ['cpu-optimized', 'gpu-optimized'], dataFormatPreference: ['luminance-alpha', 'float32'] } }

• usagePreference: `gpu-optimized` je to, co chcete pro vykreslování v reálném čase, protože to systému naznačuje, že budete primárně používat hloubková data na GPU. `cpu-optimized` by se mohlo použít pro úkoly jako asynchronní rekonstrukce sítě.
• dataFormatPreference: Požadavek `float32` vám poskytne nejvyšší přesnost, ale může mít dopad na výkon. `luminance-alpha` ukládá 16bitovou hodnotu hloubky do dvou 8bitových kanálů, což vyžaduje trochu logiky bitového posunu ve vašem shaderu pro rekonstrukci, ale na některém hardwaru může být výkonnější. Vždy zkontrolujte, jaký formát jste skutečně obdrželi, protože systém poskytuje to, co má k dispozici.

Implementujte adaptivní kvalitu

Přístup „jedna velikost pro všechny“ není u kvality optimální. Výkonné zařízení zvládne složitý víceprůchodový bilateralní filtr, zatímco slabší zařízení by s ním mohlo mít problémy. Implementujte systém adaptivní kvality:

• Při spuštění otestujte výkon zařízení nebo zkontrolujte jeho model.
• Na základě výkonu vyberte jiný shader nebo jinou sadu filtrovacích technik.
• Vysoká kvalita: Temporální EMA + Bilateralní filtr + Upsampling s ohledem na hrany.
• Střední kvalita: Temporální EMA + Jednoduchý průměr sousedů 3x3.
• Nízká kvalita: Žádné filtrování, pouze základní bilineární interpolace.

Tím zajistíte, že vaše aplikace poběží plynule na co nejširším spektru zařízení a poskytne každému uživateli ten nejlepší možný zážitek.

Závěr: Od dat k zážitku

WebXR Depth API je branou k nové úrovni ponoření, ale není to řešení typu „plug-and-play“ pro dokonalou AR. Surová data, která poskytuje, jsou pouze výchozím bodem. Skutečné mistrovství spočívá v pochopení nedokonalostí dat – jejich omezení rozlišení, šumu, slabin v prostředí – a v použití promyšleného, na výkon orientovaného procesu kontroly kvality.

Implementací temporálního a prostorového filtrování, inteligentním zpracováním děr a rozdílů v rozlišení a neustálou vizualizací vašich dat můžete přeměnit zašuměný, roztřesený signál na stabilní základ pro vaši kreativní vizi. Rozdíl mezi rušivým AR demem a skutečně uvěřitelným, pohlcujícím zážitkem často spočívá právě v této pečlivé správě informací o hloubce.

Oblast snímání hloubky v reálném čase se neustále vyvíjí. Budoucí pokroky mohou přinést rekonstrukci hloubky vylepšenou umělou inteligencí, sémantické porozumění (vědět, že pixel patří „podlaze“ versus „osobě“) a senzory s vyšším rozlišením na více zařízeních. Ale základní principy kontroly kvality – vyhlazování, filtrování a validace dat – zůstanou základními dovednostmi pro každého vývojáře, který to myslí vážně s posouváním hranic možností v rozšířené realitě na otevřeném webu.